<template>
  <div id="app">
    <header>
      <div>
        <img src="../../../assets/images/portrait.png" alt="">
      </div>
      <ul>
        <li>西红柿炒番茄</li>
        <li>11111</li>
      </ul>
      <span>></span>
    </header>
    <ul>
      <li>
        <span>昵称</span>
        <b class="grayColor">></b>
        <s>西红柿炒番茄</s>
      </li>
      <li>
        <span>手机</span>
        <b class="grayColor">></b>
        <s>13928996632</s>
      </li>
      <li>
        <span>性别</span>
        <b class="grayColor">></b>
        <s>男</s>
      </li>
      <li>
        <span>生日</span>
        <b class="grayColor">></b>
        <s>2019-1-7</s>
      </li>
    </ul>
    <router-link to="/login" class="logout baseColor">退出登录</router-link>
  </div>
</template>

<script>
  export default {
    name: "set",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    }
  }
</script>

<style lang="less" scoped>
  #app {
    header {
      background: #fff;
      display: flex;
      padding: 0.5rem;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      margin-top: 0.5rem;
      height: 4rem;
      box-sizing: border-box;
      div {
        border-radius: 50%;
        width: 2.794rem;
        flex: 2;
      }
      ul {
        flex: 7;
        font-size: 0.554rem;
        line-height: 1rem;
        padding: 0.5rem;
        li:nth-of-type(2) {
          color: #666666;
          font-size: 0.469rem;
        }
      }
      span {
        flex: 1;
        line-height: 2.8rem;
        text-align: right;
        color: #9e9e9e;
        font-family: SimSun
      }
    }
    > ul {
      margin-top: 0.5rem;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      background: #fff;
      li {
        line-height: 1.77rem;
        font-size: 0.554rem;
        margin: 0 0.5rem;
        border-bottom: 1px solid #e5e5e5;
        &:nth-of-type(4) {
          border: 0;
        }
        input {
          outline: none;
          height: 1.77rem;
          border: 0;
          width: 76%;
        }
        span {
          em {
            font-size: 0.426rem;
          }
        }
        s {
          float: right;
          text-decoration: none;
          color: #8e8e93;
        }
        b {
          float: right;
          font-family: SimSun;
          font-size: 0.8rem;
          font-weight: bold;
          margin-left: 0.3rem;
        }
      }
    }
    .logout {
      display: block;
      line-height: 1.87rem;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      text-align: center;
      font-size: 0.554rem;
      background: #fff;
      margin-top: 0.5rem;
    }
  }
</style>
